<template>
  <div class="relative">
    <div class="w-full h-[400px]" style="margin: 0 auto">
      <el-carousel height="400px" :autoplay="false">
        <el-carousel-item v-for="item in carouselList" :key="item">
          <el-image :src="item" class="w-full h-full" fit="cover"></el-image>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="absolute top-0 w-full" style="background: rgba(255, 255, 255, 0.8)">
      <div
        class="max-w-[1400px] flex items-center justify-between h-[50px]"
        style="margin: 0 auto"
      >
        <div class="flex items-center">
          <el-image
            :src="getAssetsFile('home/news.png')"
            class="w-[20px] h-[20px]"
          ></el-image>

          <div class="w-[1px] h-[16px] bg-[#F00505] ml-[20px]"></div>
          <div class="ml-[20px] text-[#F00505]" style="font-size: 16px">
            <!-- 高空作业务必做好安全措施！ -->

            <van-swipe
              vertical
              :autoplay="3000"
              class="notice-swipe"
              style="font-size: 14px"
              :touchable="false"
              :show-indicators="false"
            >
              <van-swipe-item v-for="item in noticeList">
                <span @click="noticeDetail(item)">{{ item.title }}</span>
              </van-swipe-item>
            </van-swipe>
          </div>
        </div>
        <div
          class="flex items-center cursor-pointer"
          @click="router.push('/index/notice')"
        >
          <div style="font-size: 14px">更多</div>

          <el-image
            :src="getAssetsFile('home/arrow_left.png')"
            class="w-[6px] ml-[10px] h-[12px] mb-[1px]"
            fit="cover"
          ></el-image>
        </div>
      </div>
    </div>
  </div>

  <div class="bg-[#F2F4F5] pt-[20px] overflow-hidden">
    <div class="bg-white px-[30px] py-[40px] max-w-[1440px]" style="margin: 0 auto">
      <div class="flex items-center">
        <div style="font-size: 18px">品牌公司：</div>
        <div class="ml-[20px] flex">
          <div
            v-for="item in renameArr"
            class="mr-[20px] flex justify-center items-center px-[20px] py-[10px] cursor-pointer"
            style="font-size: 15px"
            :class="{
              ' border border-[#EF6800] rounded-[5px] text-[#EF6800]': item.isActive,
              'text-[#4F4F4F]': !item.isActive,
            }"
            @click="clickRename(item)"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
      <div class="flex items-center mt-[50px]">
        <div style="font-size: 18px">产品分类：</div>
        <div class="ml-[20px] flex">
          <div
            v-for="item in classArr"
            class="mr-[20px] flex justify-center items-center px-[20px] py-[10px] cursor-pointer"
            style="font-size: 15px"
            :class="{
              ' border border-[#EF6800] rounded-[5px] text-[#EF6800]': item.isActive,
              'text-[#4F4F4F]': !item.isActive,
            }"
            @click="clickClass(item)"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
    </div>
    <div class="mt-[20px]">
      <div class="max-w-[1440px]" style="margin: 0 auto">
        <div class="p-[30px] flex bg-white mb-[20px]" v-for="item in List">
          <!-- 左侧 -->
          <div>
            <div>
              <el-image :src="item.banner" class="w-[465px] h-[310px]"></el-image>
              <div
                class="w-[465px] h-[38px] flex justify-center items-center bg-[#EF6800] text-white rounded-[5px]"
                v-if="Number(item.user_rate) > 0"
              >
                推广费：{{ item.user_rate }}%
              </div>
            </div>
            <div class="mt-[40px] flex justify-between" style="font-size: 14px">
              <div
                v-if="item.notice"
                @click="openDialog('投保须知', item.id)"
                class="w-[104px] h-[38px] flex justify-center items-center border border-[#EF6800] rounded-[5px] text-[#EF6800] cursor-pointer"
              >
                投保须知
              </div>
              <div
                @click="openDialog('产品详情', item.id)"
                class="w-[104px] h-[38px] flex justify-center items-center border border-[#EF6800] rounded-[5px] text-[#EF6800] cursor-pointer"
              >
                产品详情
              </div>
              <div
                @click="openDialog('保单样本', item.id)"
                class="w-[104px] h-[38px] flex justify-center items-center border border-[#EF6800] rounded-[5px] text-[#EF6800] cursor-pointer"
              >
                保单样本
              </div>
              <div
                @click="openDialog('产品条款', item.id)"
                class="w-[104px] h-[38px] flex justify-center items-center border border-[#EF6800] rounded-[5px] text-[#EF6800] cursor-pointer"
              >
                产品条款
              </div>
            </div>
          </div>
          <!-- 右侧 -->
          <div class="ml-[60px] w-full">
            <div class="font-bold text-[#EF6800]" style="font-size: 20px">
              {{ item.name }}
            </div>
            <div class="mt-[15px]" style="font-size: 16px">
              {{ item.brand }}
            </div>
            <div class="flex justify-between mt-[24px] w-full">
              <div>
                <div
                  class="max-w-[640px] leading-[25px] overflow-hidden"
                  style="font-size: 14px"
                  :class="item.memoload ? '' : 'h-[300px]'"
                >
                  <span style="white-space: pre-wrap">{{ item.memo }}</span>
                </div>
                <div class="flex justify-center mt-[20px]">
                  <el-image
                    v-if="!item.memoload"
                    @click="loadMemo(item, 0)"
                    :src="getAssetsFile('home/arrow_bottom.png')"
                    class="w-[10px] h-[10px] cursor-pointer"
                  ></el-image>
                  <el-image
                    v-if="item.memoload"
                    @click="loadMemo(item, 1)"
                    :src="getAssetsFile('home/arrow_top.png')"
                    class="w-[10px] h-[10px] cursor-pointer"
                  ></el-image>
                </div>
              </div>
              <div class="flex flex-col justify-center items-center">
                <div class="flex items-end">
                  <div class="text-[#EF6800]" style="font-size: 30px">
                    {{ item.price }}
                  </div>
                  <div class="mb-[2px]" style="font-size: 16px">元/起</div>
                </div>
                <!-- 紫金保险 -->
                <div
                  v-if="item.type == 1"
                  @click="clickTb(item)"
                  style="font-size: 14px"
                  class="mt-[20px] w-[118px] h-[38px] flex justify-center items-center bg-[#EF6800] rounded-[5px] text-white cursor-pointer"
                >
                  报价与投保
                </div>
                <!-- 华安保险 -->
                <div
                  v-if="item.type == 0"
                  style="font-size: 14px"
                  class="mt-[20px] w-[118px] h-[38px] flex justify-center items-center bg-[#EF6800] rounded-[5px] text-white cursor-pointer"
                >
                  <div @click="submit(item.share_url)">报价与投保</div>
                  <!-- <a :href="item.share_url" target="_blank">报价与投保</a> -->
                </div>
                <!-- 大地保险 -->

                <div
                  @click="openDialog('分享', item.id)"
                  style="font-size: 14px"
                  class="w-[118px] h-[38px] mt-[15px] border border-[#EF6800] rounded-[5px] flex justify-center items-center text-[#EF6800] cursor-pointer"
                >
                  分享
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-if="List.length <= 0">
          <nodata></nodata>
        </div>
      </div>
    </div>
  </div>
  <div>
    <el-dialog
      v-model="dialogTableVisible"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :style="shareImage ? 'width:400px;' : ''"
    >
      <div class="bg-[#F5F5F5] w-full h-[50px] relative">
        <div
          style="font-size: 16px"
          class="font-bold w-full flex justify-center items-center h-[50px]"
        >
          {{ dialogTitle }}
        </div>
        <div
          @click="dialogTableVisible = false"
          class="w-[12px] h-[12px] absolute top-[16px] right-[30px] cursor-pointer"
        >
          <el-image
            :src="getAssetsFile('home/close.png')"
            class="w-full h-full"
          ></el-image>
        </div>
      </div>
      <div class="p-[30px]" v-html="dialogVhtml" v-if="dialogVhtml"></div>
      <div v-else class="p-[30px]">
        <div v-for="item in docList" v-if="docList.length > 0">
          <div
            class="text-blue-500 cursor-pointer mb-[20px]"
            @click="clickdocList(item.id)"
          >
            {{ item.title }}
          </div>
        </div>
        <div v-else class="pb-[30px] px-[30px] flex w-full flex-col items-center">
          <el-image
            :src="shareImage"
            style="width: 250px"
            fit="contain"
            id="save"
          ></el-image>
          <div
            @click="saveImage"
            style="font-size: 14px"
            class="mt-[30px] w-[100px] h-[30px] flex justify-center items-center bg-[#EF6800] rounded-[4px] text-white cursor-pointer"
          >
            保存
          </div>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      v-model="urlShow"
      width="740px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <template #default>
        <span>
          <iframe class="h-[720px] w-full" :src="share_url"></iframe>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import getAssetsFile from "@/utils/getImageurl.ts";
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import { useUserStore } from "@/store/index";
import html2canvas from "html2canvas";
import {
  indexCarousel,
  indexClassify,
  Index,
  indexGetIndexNotice,
  getJobClassify,
} from "@/utils/api";
import nodata from "@/components/nodata/nodata.vue";
const router = useRouter();
const store = useUserStore();
const urlShow = ref(false);
const dialogTitle = ref("");
const share_url = ref("");
const List = ref([] as any[]); //itemList
const noticeList = ref<noticeType[]>([]); //公告列表
const shareImage = ref(""); //分享图片
const docList = ref<docListType[]>([]); //产品条款列表
const carouselList = ref<Array<string>>([]);
const dialogVhtml = ref(""); //弹框中的富文本
//品牌分类
const renameArr = ref<classType[]>([]);
//产品分类
const classArr = ref<classType[]>([]);
//类别
const category = ref([] as any);
const param = reactive<homeParamType>({
  classify_id: 0,
  brand_id: 0,
});
const dialogTableVisible = ref<boolean>(false);
const submit = (url: any) => {
  urlShow.value = true;
  share_url.value = url;

};
//获取轮播图数据
const getCarousel = async () => {
  const res = await indexCarousel("");
  carouselList.value = res.msg;
};
//加载描述
const loadMemo = (item: any, index: number) => {
  //index 0是加载 1是收回
  List.value.forEach((it: any) => {
    if (it.id == item.id) {
      if (index == 0) {
        it["memoload"] = true;
      } else {
        it["memoload"] = false;
      }
    }
  });
};
//获取分类数据
const getClassify = async () => {
  const res = await indexClassify("");
  classArr.value = res.msg.classify;
  renameArr.value = res.msg.brand;
};
//获取职业类别数据
const getCategory = async () => {
  const res = await getJobClassify("");
  // console.log(res);
};
//获取首页列表数据
const getList = async () => {
  const res = await Index(param);
  List.value = res.msg;
  List.value.forEach((item: any) => {
    item["memoload"] = false;
  });
};
const getNoticeList = async () => {
  const res = await indexGetIndexNotice("");
  noticeList.value = res.msg;
  // console.log(noticeList.value);
};
const getData = () => {
  getClassify();
  getCarousel();
  getList();
  getCategory();
  getNoticeList();
};
getData();
const clickRename = (item: any) => {
  for (let i in renameArr.value) {
    if (renameArr.value[i].name == item.name) {
      renameArr.value[i].isActive = !renameArr.value[i].isActive;
      if (renameArr.value[i].isActive) {
        param.brand_id = item.id;
      } else {
        param.brand_id = 0;
      }
    } else {
      renameArr.value[i].isActive = false;
    }
    // if (renameArr.value[i].isActive == false) {
    //   param.brand_id = 0;
    //   param.classify_id = 0;
    // }
  }

  getList();
};
const clickClass = (item: any) => {
  for (let i in classArr.value) {
    if (classArr.value[i].name == item.name) {
      classArr.value[i].isActive = !classArr.value[i].isActive;
      if (classArr.value[i].isActive) {
        param.classify_id = item.id;
      } else {
        param.classify_id = 0;
      }
    } else {
      classArr.value[i].isActive = false;
    }
  }

  getList();
};
//类别选择

//打卡弹框
const openDialog = (name: string, id: number) => {
  dialogTitle.value = name;
  // console.log(List.value);
  shareImage.value = "";
  List.value.forEach((item, _) => {
    if (item.id == id) {
      switch (name) {
        case "投保须知":
          dialogVhtml.value = item.notice;
          break;
        case "产品详情":
          dialogVhtml.value = item.detail;
          break;
        case "保单样本":
          dialogVhtml.value = item.sample;
          break;
        case "产品条款":
          dialogVhtml.value = "";
          docList.value = item.doc;
          break;
        case "分享":
          dialogVhtml.value = "";
          docList.value = [];
          // shareImage.value = getAssetsFile("img.png");
          shareImage.value = item.share;

          break;
        default:
          break;
      }
    }
  });
  dialogTableVisible.value = true;
};
//点击列表item
const clickdocList = (id: number) => {
  docList.value.forEach((item, _) => {
    if (item.id === id) {
      dialogVhtml.value = item.content;
    }
  });
};
//投保
const clickTb = (item: any) => {
  //type 0是华安 1是紫金
  // if (item.type == 0) {
  //   // shareImage.value = item.share;
  //   // dialogTableVisible.value = true;
  //   window.location.href = item.share_url;
  //   return;
  // }
  let id = item?.id;
  let url;

  switch (id) {
    case 1:
      //紫金实习生意外险
      url = router.resolve({
        path: "/index/zj_sxs",
        query: { id: id },
      });
      break;
    case 3:
      //紫金短期施工意外险
      url = router.resolve({
        path: "/index/zj_dqyw",
        query: { id: id },
      });
      break;
    case 7:
      //枣庄建工一切
      url = router.resolve({
        path: "/index/zz_jgyq",
        query: { id: id },
      });
      break;
    case 8:
      //枣庄公众责任
      url = router.resolve({
        path: "/index/zz_gz",
        query: { id: id },
      });
      break;
    case 19:
      //大地保险建工一切险
      url = router.resolve({
        path: "/index/dd_jgyq",
        query: { id: id },
      });
      break;
    case 20:
      //大地保险财产一切险(不含地震)
      url = router.resolve({
        path: "/index/dd_ccyqx",
        query: { id: id },
      });
      break;
    case 21:
      //大地保险财产一切险（含地震）
      url = router.resolve({
        path: "/index/dd_ccyqx",
        query: { id: id },
      });
      break;
    case 22:
      //大地公众责任险
      url = router.resolve({
        path: "/index/dd_gz",
        query: { id: id },
      });
      break;
    case 23:
      //大地公众责任险(餐饮)
      url = router.resolve({
        path: "/index/dd_gz",
        query: { id: id },
      });
      break;
    case 24:
      //大地雇主险
      url = router.resolve({
        path: "/index/dd_jggzx",
        query: { id: id },
      });
      break;
    default:
      url = router.resolve({
        path: "/index/detail",
        query: { id: id },
      });
      break;
  }

  window.open(url.href);
};

/** html转base64 */
const saveImage = () => {
  html2canvas(<HTMLElement>document.querySelector("#save"), {
    useCORS: true,
  }).then((canvas: any) => {
    const base64 = canvas.toDataURL().replace(/^data:image\/(png|jpg);base64,/, "");
    const base64img = `data:image/png;base64,${base64}`;
    downloadBase64(base64img, "下载图片");
  });
};
/** 下载图片 */
const downloadBase64 = (content: string, fileName: string) => {
  var base64ToBlob = function (code: any) {
    let parts = code.split(";base64,");
    let contentType = parts[0].split(":")[1];
    let raw = window.atob(parts[1]);
    let rawLength = raw.length;
    let uInt8Array = new Uint8Array(rawLength);
    for (let i = 0; i < rawLength; ++i) {
      uInt8Array[i] = raw.charCodeAt(i);
    }
    return new Blob([uInt8Array], {
      type: contentType,
    });
  };
  let aLink = document.createElement("a");
  let blob = base64ToBlob(content);
  aLink.download = fileName + ".png";
  aLink.href = URL.createObjectURL(blob);
  aLink.click();
};
//公告详情
const noticeDetail = (item: any) => {
  router.push("/index/noticeDetail?id=" + item.id);
};
</script>
<style scoped lang="scss">
.notice-swipe {
  height: 40px;
  line-height: 40px;
}

.memo {
  height: 300px;
}
</style>
